<!--
 * @Author: Xujianchen
 * @Date: 2025-01-20 17:27:14
 * @LastEditors: Xujianchen
 * @LastEditTime: 2025-01-21 10:17:00
 * @Description: json编辑器
-->
<template>
  <vue-json-pretty
    v-bind="bindValue"
    v-model:data="modelValue"
    @selectedChange="
      (newVal, oldVal) => emits('selected-change', { newVal, oldVal })
    "
    @nodeClick="(node) => emits('node-click', node)"
    @bracketsClick="
      (collapsed, node) => emits('brackets-click', { collapsed, node })
    "
    @iconClick="(collapsed, node) => emits('icon-click', { collapsed, node })"
  >
    <template v-for="(_, name) in slots" #[name]="scopedData">
      <slot :name="name" v-bind="scopedData" />
    </template>
  </vue-json-pretty>
</template>

<script setup>
import useConfigStore from '@/store/modules/config'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'

const modelValue = defineModel({ type: [Object, Array], default: () => ({}) })
const emits = defineEmits([
  'node-click',
  'brackets-click',
  'icon-click',
  'selected-change',
  'update:modelValue',
  'change',
])

const attrs = useAttrs()
const slots = useSlots()
const configStore = useConfigStore()

const bindValue = computed(() => ({
  theme: configStore.globalConfig.theme,
  ...attrs,
}))
</script>
